<script setup lang="ts">
import { ref, onMounted } from 'vue'
import NavBottom from '../../components/nav.vue'
import {get} from '@/api/api'
import {typeList} from '@/utils/index'
import {useRouter} from 'vue-router'

const router = useRouter()

const progressList = ref([
    {
        name: '待处理',
        key: 'PENDING'
    },
    {
        name: '已完成',
        key: 'COMPLETED'
    },
])
const data = ref(typeList)
const status = ref('PENDING')
const queryType = ref('')
const progressIndex = ref(0)
const typeIndex = ref(0)
const changeStatus = (key: string, index: number) => {
    status.value = key
    getStatusData()
    progressIndex.value = index
}

const statusList = ref([])
const getStatusData = async () => {
    let params = {
        status: status.value,
        queryType: queryType.value,
    }
    const res = await get('/c/query/order/list', params);
    statusList.value = res.data?.data?.content || []

}
onMounted( () => {
    getStatusData()
})

const changeType = (key: string, index: number) => {
    typeIndex.value = index
    queryType.value = key === 'all' ? '' : key
    getStatusData()
}

const setProgress = (item: any) => {
    return data.value.filter((i) => { return i.key === item})[0]?.name
}
const setStatus = (item: any) => {
    return progressList.value.filter((i) => { return i.key === item})[0]?.name
}
const toDetail = (item) => {
    router.push({ path: '/progressDetail', query: { code: item.code } });
}
</script>

<template>

  <div class="progress">
    <div class="progress-top">
        <div class="progress-top1">查询进度</div>
        <div class="progress-status">
            <div v-for="(item, index) in progressList" :key="index" :class="{progressActive: index === progressIndex}" @click="changeStatus(item.key, index)">
                {{ item.name }}
            </div>
        </div>
        
        <div  class="my-item2">
            <span class="my-item1" v-for="(item, index) in data" :key="index" :class="{active: index === typeIndex}"  @click="changeType(item.key, index)">{{ item.name }}</span>
        </div>
    </div>
    
    <div class="my-search" v-if="statusList.length">
        <div class="my-search-item" v-for="(item, index) in statusList" :key="index">
            <div class="title">
                <span>{{setProgress(item.queryType)}}</span>
                <span :class="item.orderStatus === 'PENDING' ? 'pending' : 'finished'" @click="toDetail(item)">{{setStatus(item.orderStatus)}}<el-icon><ArrowRight /></el-icon></span>
            </div>
            <div class="info"><span>查询姓名</span><span>{{item.queryName}}</span></div>
            <div class="info"><span>查询时间</span><span>{{item.createTime}}</span></div>
            <div class="info"><span>订单编号</span><span>{{item.code}}</span></div>
        </div>
    </div>
    
    <NavBottom></NavBottom>
  </div>
</template>

<style scoped>
.progress{
    background-color: #f6f6f6;
    padding-bottom: 20%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    rotate: 0;
    right: 0;
}
.progress-top{
    height: 155px;
    background: #fff;
}
.progress-top1{
    text-align: center;
    width: 100%;
    padding-top: 30px;
}
.progress-status{
    display: flex;
    justify-content: space-around;
    margin: 0 5px;
    margin-top: 16px;
    color: #000000;
}
.progressActive{
    position: relative;
}
.progressActive::before {
    content: "";
    display: block;
    height: 5px; /* 横杠的高度 */
    background: #2863FD; /* 横杠的颜色 */
    margin: 5px 0; /* 横杠的上下外边距 */
    width: 20px;
    position: absolute;
        bottom: -12px;
    border-radius: 6px;
    left: 50%;
    transform: translateX(-50%);
  }

.progress-asset{
    display: flex;
    margin: 0 16px;
    margin-top: 16px;

}
.my-search {
    height: calc(100vh - 235px);
    overflow-y: scroll;
}

.my-item1{
    margin: 0 12px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #666666;
    white-space: nowrap;
}
.my-item2{
    display: flex;
        margin: 0 16px;
    margin-top: 12px;
    align-items: center;
    overflow-y: scroll;
}
:deep(.el-button){
    border-radius: 20px;
    margin-top: 6px;
}
.active{
    color: #346EFE;
    padding: 2px 16px;
    height: 30px;
    border-radius: 20px;
    background: #E1E9FF;
    text-align: center;
    font-size: 14px;
}
.my-search-item{
    margin: 13px 16px;
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    padding-bottom: 4px;
}
.title {
    border-bottom: 1px solid #EBEBEB;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.info{
    display: flex;
    justify-content: space-between;
    margin: 13px 0;
    font-size: 15px;
    align-items: center;
}
.info span:last-child{
    color: #999999;
    font-size: 13px;
}

/* 隐藏滚动条的样式 */
::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.pending{
    color: #FF0505;
    display: flex;
    align-items: center;
}
.finished{
    color: #4CB65B;
    display: flex;
    align-items: center;
}
.pending .el-icon, .finished .el-icon{
    color: #999999;
}
</style>
